<template>
	<view class="main">
		<view class="main_body">
			<view class="content">
		    <view class="head">
		        <text>职场大舞台</text>
		        <text style="font-size: 14px;height: 60rpx;line-height: 60rpx;width: 100%;letter-spacing: 20rpx;">知人通，你有三份工资</text>
		        <image
							src="../../static/img/logo.png"
							style="margin: 20rpx 0; width:230rpx; height:80rpx"
					 ></image>
		    </view>
				
				<view style="margin:40rpx">
					<u-radio-group
						v-model="form.type"
						@change="groupChange"
					>
						<u-radio
							:customStyle="{marginRight: '16px'}"
							v-for="(item, index) in radiolist"
							:key="index"
							:label="item.name"
							:name="item.type"
							labelColor="#fff"
						>
						</u-radio>
					</u-radio-group>
				</view>
		    <view class="item_body">
		        <view class="baikuang"><input class="item_input" placeholder-style="color:#FFF"  type="text" v-model="form.username" :placeholder="planame" ></view>
		        <view class="baikuang"><input class="item_input" placeholder-style="color:#FFF"  type="text" v-model="form.phone" placeholder="手机号码" ></view>
						<div class="baikuang" style="display: flex;">
							<input type="text" class="item_input" v-model="form.phonecode" placeholder="输入短信验证码" style="color:#999"> 
							<view class="yzmbtn" v-if="isCountdown" @tap="sendMessge">获取验证码</view>
							<view class="yzmbtn" v-else>{{ countdown }}秒</view>
						</div>
		        <view class="baikuang"><input class="item_input" placeholder-style="color:#FFF"  type="password" v-model="form.password"  placeholder="设置密码"></view>
						<view class="baikuang">
							<xl-slider-verify @success="verifySuccess" :reset="false"></xl-slider-verify>
						</view>
						<view class="signin-footer" >
							<checkbox-group class="block margin-right-xs" @change="CheckboxChange">
									<checkbox class='round blue' :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false"
									 value="1"></checkbox>
							</checkbox-group>
							同意
							<text class="text-white" @click="goto('/pages/article/yinsi')">《用户协议》《隐私协议》</text>
						</view>
		        <button class="loginbut" @click="loginBut">提交</button>

						<view class="item_bottom">
							<view @tap="goto('/pages/login/login')">我有账号</view>
							<view @tap="goto('/pages/login/getpwd')">忘记密码</view>
						</view>
		    </view>
			</view>
		</view>
	</view>
</template>
<script>
	import util from "@/utils/utils.js"
	import { register,getvcodebymob,wxappAuth } from '@/api/login.js'
	import xlSliderVerify from '@/components/xl-slider-verify/xl-slider-verify.vue'
	export default {
		components:{
			xlSliderVerify
		},
		data() {
			return {
			checkbox: [{
				value: '1',
				checked: false
			}],
				planame:'真实姓名',
				form: {
					verify:false,
					username:'',
					type: 1,
					phone: '',
					password: '',
					phonecode: '',
					openid:'',
					code:''
				},
				isCountdown: true,
				countdown: 60,
				radiolist: [{
						type:1,
						name: '用户注册',
						disabled: true
					},
					{
						type:2,
						name: '企业注册',
						disabled: false
					}
				],
			}
		},
		onLoad() {
			
		},
		methods: {
			//账号类型
			groupChange(n) {
				this.form.type = n
				if(n == 2){
					this.planame="企业全称"
				}
				else{
					this.planame="真实姓名"
				}
			},
			//滑动验证
			verifySuccess(){
				this.form.verify = true
			},
			loginBut(){
				let that = this
				if (this.form.username == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写账号'
					});
				}
				if (this.form.phone == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写手机号码'
					});
				}
				if (this.form.phonecode == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写手机验证码'
					});
				}
				if (this.form.password == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写密码'
					});
				}
				if (!this.form.verify) {
					return uni.showToast({
						icon: 'none',
						title: '请先滑动验证'
					});
				}
				
				if(this.checkbox[0].checked == false){
					return uni.showModal({
						showCancel: false,
						title: '先同意用户协议',
					})
				}
				
				uni.login({
					success: result => {
						that.loadModal = true
						let data = {
							type:this.form.type,
							username:this.form.username,
							phone:this.form.phone,
							password:this.form.password,
							phonecode:this.form.phonecode,
							code:result.code
						}
						register(data).then(res=>{
							if(res.code == 200){
								util.set('token', res.data.token)
								util.set('type',this.form.type)
								if(that.form.type == 1){
									that.goto('/resume/basic')
								}
								else{
										that.goto('/pages/enterprise/basic')
								}
							}
							else{
								uni.showToast({
									icon: 'none',
									title: res.msg
								});
							}
						})
					}
				});
			},
			
			
			//同意用户协议
			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			
			//获取验证码
			sendMessge() {
			  const that = this
			  if (that.form.phone === '') {
			    uni.showModal({
			      showCancel: false,
			      title: '失败提示',
			      content: '请输入手机号'
			    })
			    return
			  }
			  getvcodebymob({ phone: that.form.phone}).then(res => {
			    if (res.code == 200) {
			      that.setCountdown(90)
			    } else {
			      uni.showModal({
			        showCancel: false,
			        title: '失败提示',
			        content: res.msg
			      })
			    }
			  }, err => { console.error(err) })
			},
			
			setCountdown(num = 60) {
			  const that = this
			  that.isCountdown = false
			  that.countdown = num
			  that.timer = setInterval(() => {
			    that.countdown--
			    if (that.countdown === 0) {
			      that.isCountdown = true
			      clearInterval(that.timer)
			    }
			  }, 1000)
			},
			goto(tourl) {
				uni.redirectTo({
					url: tourl
				});
			}
		}
	}
</script>

<style>
    .head{
			width: 100%;
			margin-top: 80rpx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}
		.head text{
			height: 120rpx;
			line-height: 120rpx;
			font-size: 60rpx;
			text-align: center;
			letter-spacing:40rpx;
			text-indent: 40rpx;
			color: #fff;
    }
		.head .logoimg{
			width: 230rpx;
			height: 80rpx;
			margin: 40rpx auto;
		}
		
		.item_body{
			background:rgba(0,38,53,0.5);
			padding: 50rpx 26rpx;
			display: flex;
			flex-wrap: wrap;
			border-radius: 30rpx;
		}

		.item_body .baikuang{
			width: 100%;
			position: relative;
			margin-bottom: 40rpx;
		}
		.item_body .baikuang .item_input{
			background:rgba(77,94,104,0.5);
			height: 76rpx;
			line-height: 76rpx;
			padding-left: 25rpx;
			color: #fff;
		}
		.item_body .baikuang .yzmbtn{
			position: absolute;
			background-color: #43e4f8;
			width: 220rpx;
			margin: auth;
			text-align: center;
			height: 76rpx;
			line-height: 76rpx;
			right: 0;
			top: 0;
			color: #fff;
		}
		.loginbut {
		    width: 100%;
		    height: 80rpx;
		    display: block;
		    line-height: 80rpx;
		    background: #43e4f8;
		    border-radius: 10rpx;
		    font-size: 28rpx;
		    color: #fff;
		    text-align: center;
		    border: #43e4f8 solid 4rpx;
		}
    .item_bottom{
			width: 100%;
			display: flex;
			justify-content: space-between;
			color: #fff;
			height: 50rpx;
			margin: 40rpx 0;
		}
		.signin-footer {
			display: flex;
			align-items: center;
			margin-bottom: 60rpx;
			color: #fff;
		}
		
		.signin-footer > view {
		    color: #e8af2e;
		    font-size: 28rpx;
		    text-decoration: none;
		}
		uni-checkbox .uni-checkbox-input {
		    width: 30rpx !important;
		    height: 30rpx !important;
		}
</style>